<!--  -->
<template>
    <view class="ck-container">
        <view class="ck-search">
            <u-search
                shape="round"
                placeholder="请输入产品名称"
                :actionStyle="{ fontSize: '30rpx' }"
                @search="search"
                @custom="search"
            ></u-search>
        </view>
        <view class="ck-title">
            <view class="ck-title-text">
                全部库存（<text style="color: #00bd22">{{ ck_list.length }}</text
                >）
            </view>
            <view class="ck-title-add" @click="toCK(1)">新增入库</view>
        </view>
        <view class="ck-content">
            <view v-for="item in ck_list" class="ck-content-item">
                <view class="ck-content-item-name">
                    <view>{{ item.name }}</view>
                    <view class="ck-content-item-btn" @click="toCK(2)">出库</view>
                </view>
                <view style="height: 60rpx; line-height: 60rpx">
                    仓库：<text style="color: #1296db">{{ item.displayName }}</text>
                </view>
                <view
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 60rpx;
                        margin-bottom: 40rpx;
                    "
                >
                    <view>入库量：{{ item.size }}</view>
                    <view>合格率：{{ item.qualified }}%</view>
                </view>
                <u-line></u-line>
            </view>
        </view>
        <u-popup :show="show" mode="right" @close="closeHandler" :closeable="true">
            <view style="width: 600rpx; padding: 30rpx; box-sizing: border-box">
                <view class="form_items">
                    <view>请选择仓库</view>
                    <view class="select" @click="openPicker(1)">
                        <view>{{ form.ck }}</view>
                        <image class="jiantou" src="/static/jiantou.png" />
                    </view>
                </view>
                <view class="form_items">
                    <view>产品种类</view>
                    <view class="select" @click="openPicker(2)">
                        <view>{{ form.cpzl }}</view>
                        <image class="jiantou" src="/static/jiantou.png" />
                    </view>
                </view>
                <view class="form_items">
                    <view>产品名称</view>
                    <view class="select">
                        <u-input v-model="form.cpmc" border="node"></u-input>
                    </view>
                </view>

                <view class="form_items">
                    <view>合格率</view>
                    <view style="margin: 30rpx 0">
                        <u-number-box
                            v-model="form.hgl"
                            :asyncChange="true"
                            @change="changeHgl"
                        >
                            <view
                                slot="input"
                                style="
                                    width: 500px;
                                    text-align: center;
                                    background: #eee;
                                    height: 62rpx;
                                    margin: 0 10rpx;
                                "
                                class="input"
                            >
                                <u-input
                                    v-model="form.hgl"
                                    inputAlign="center"
                                    border="node"
                                ></u-input>
                            </view> </u-number-box
                    ></view>
                </view>
                <view class="form_items">
                    <view>入库量</view>
                    <view style="margin: 30rpx 0">
                        <u-number-box
                            v-model="form.rkl"
                            :asyncChange="true"
                            @change="changeRkl"
                        >
                            <view
                                slot="input"
                                style="
                                    width: 500px;
                                    text-align: center;
                                    background: #eee;
                                    height: 62rpx;
                                    margin: 0 10rpx;
                                "
                                class="input"
                            >
                                <u-input
                                    v-model="form.rkl"
                                    inputAlign="center"
                                    border="node"
                                ></u-input>
                            </view> </u-number-box
                    ></view>
                </view>
                <view class="form_items">
                    <view>产品种类</view>
                    <view class="select" @click="openPicker(2)">
                        <view>{{ form.cpzl }}</view>
                        <image class="jiantou" src="/static/jiantou.png" />
                    </view>
                </view>
                <view class="form_items">
                    <view>出库时间</view>
                    <view class="select" @click="openDateTime">
                        <view>{{
                            form.cksj
                                ? $u.timeFrom(form.cksj, "yyyy-mm-dd hh:MM:ss")
                                : "请选择时间"
                        }}</view>
                        <image class="jiantou" src="/static/jiantou.png" />
                    </view>
                </view>
                <view class="form_btn" @click="submit" v-if="type == 1">确定新增</view>
                <view class="form_btn" @click="submit" v-if="type == 2">确定出库</view>
            </view>
        </u-popup>
        <u-datetime-picker
            :show="showDatetime"
            v-model="form.cksj"
            @close="dateTimeClose"
            @confirm="timeConfirm"
            mode="datetime"
        ></u-datetime-picker>
        <u-picker
            :show="showPicker"
            :columns="columns"
            keyName="name"
            @close="pickerClose"
            @confirm="confirm"
        ></u-picker>
    </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import fuzzySearch from "../../utils/search";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            columns: [],
            showDatetime: false,
            showPicker: false,
            list: [
                {
                    name: "1号仓库",
                    code: "编号 95",
                    gs_code: "公司编号 77",
                    zkid: "主控ID 1",
                    sbzs: "10",
                    yxsb: "8",
                    dxsb: "2",
                },
                {
                    name: "灌溉设备仓库",
                    code: "编号 142",
                    gs_code: "公司编号 17",
                    zkid: "主控ID 2",
                    sbzs: "46",
                    yxsb: "52",
                    dxsb: "14",
                },
                {
                    name: "检测设备仓库",
                    code: "编号 15",
                    gs_code: "公司编号 23",
                    zkid: "主控ID 3",
                    sbzs: "51",
                    yxsb: "23",
                    dxsb: "28",
                },
                {
                    name: "西部仓库",
                    code: "编号 42",
                    gs_code: "公司编号 61",
                    zkid: "主控ID 4",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "10",
                },
                {
                    name: "总部仓库",
                    code: "编号 41",
                    gs_code: "公司编号 22",
                    zkid: "主控ID 5",
                    sbzs: "26",
                    yxsb: "14",
                    dxsb: "12",
                },
                {
                    name: "3号仓库",
                    code: "编号 141",
                    gs_code: "公司编号 212",
                    zkid: "主控ID 6",
                    sbzs: "70",
                    yxsb: "58",
                    dxsb: "12",
                },
                {
                    name: "66号仓库",
                    code: "编号 51",
                    gs_code: "公司编号 32",
                    zkid: "主控ID 6",
                    sbzs: "152",
                    yxsb: "138",
                    dxsb: "14",
                },
                {
                    name: "备用仓库",
                    code: "编号 63",
                    gs_code: "公司编号 54",
                    zkid: "主控ID 7",
                    sbzs: "19",
                    yxsb: "17",
                    dxsb: "2",
                },
            ],
            form: {
                ck: "1号仓库",
                cpzl: "12",
                cpmc: "玉米",
                hgl: "0",
                rkl: "0",
                cksj: "",
            },
            show: false,
            cpzlLit: [
                {
                    name: "玉米",
                    code: "12",
                },
                {
                    name: "大米",
                },
                {
                    name: "红薯",
                },
                {
                    name: "馒头",
                },
            ],
            rows: [
                {
                    id: "48",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "12",
                    qualified: "12",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-11-08 13:57:21",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "49",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "12",
                    qualified: "12",
                    operator: "花卉养殖",
                    operatorName: null,
                    create_time: "2024-11-08 13:58:35",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "51",
                    warehouse_id: "94",
                    name: "大米",
                    type: "大米",
                    size: "100",
                    qualified: "90",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:35:43",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "52",
                    warehouse_id: "94",
                    name: "大米2",
                    type: "大米",
                    size: "100",
                    qualified: "90",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:35:55",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "53",
                    warehouse_id: "94",
                    name: "玉米1",
                    type: "玉米",
                    size: "1000",
                    qualified: "99",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:36:12",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "54",
                    warehouse_id: "94",
                    name: "红薯第一期",
                    type: "红薯",
                    size: "100",
                    qualified: "90",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:36:28",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "55",
                    warehouse_id: "94",
                    name: "红薯第二期",
                    type: "红薯",
                    size: "100",
                    qualified: "90",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:36:41",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "56",
                    warehouse_id: "94",
                    name: "玉米第三期",
                    type: "玉米",
                    size: "200",
                    qualified: "90",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-04 16:37:11",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "57",
                    warehouse_id: "94",
                    name: "111",
                    type: "大米",
                    size: "4",
                    qualified: "3",
                    operator: "77",
                    operatorName: null,
                    create_time: "2024-12-25 21:59:37",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "58",
                    warehouse_id: "94",
                    name: "11",
                    type: "馒头",
                    size: "2",
                    qualified: "2",
                    operator: "77",
                    operatorName: null,
                    create_time: "2025-02-19 18:57:58",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "60",
                    warehouse_id: "121",
                    name: "东北大米",
                    type: "大米",
                    size: "100",
                    qualified: "98",
                    operator: "77",
                    operatorName: null,
                    create_time: "2025-03-30 12:16:01",
                    io_type: null,
                    displayName: "12",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "62",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "1",
                    qualified: "12",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-04-10 10:41:03",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "65",
                    warehouse_id: "121",
                    name: "东北大米",
                    type: "大米",
                    size: "1",
                    qualified: "88",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-04-29 18:17:38",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "66",
                    warehouse_id: "122",
                    name: "ii",
                    type: "红薯",
                    size: "1",
                    qualified: "1",
                    operator: "77",
                    operatorName: null,
                    create_time: "2025-05-10 03:04:40",
                    io_type: null,
                    displayName: "1号仓库",
                    io_time: null,
                    typeName: null,
                },
            ],
            openType: 1,
            type: "1",
            ck_list: [],
        };
    },
    onLoad(options) {
        this.search("");
    },
    //方法集合
    methods: {
        openDateTime() {
            this.showDatetime = true;
        },
        search(value) {
            this.ck_list = fuzzySearch(value, this.rows, ["name"]);
        },
        openPicker(type) {
            this.openType = type;
            if (type == 1) {
                this.columns = [this.list];
            } else if (type == 2) {
                this.columns = [this.cpzlLit];
            }

            this.showPicker = true;
        },
        confirm(e) {
            if (this.openType == 1) {
                this.$set(this.form, "ck", e.value[0].name);
            } else if (this.openType == 2) {
                this.$set(this.form, "cpzl", e.value[0].name);
            }
            this.showPicker = false;
        },
        submit() {
            if (this.type == 1) {
                uni.show;
            }
        },
        timeConfirm(e, mode) {
            this.$set(this.form, "cksj", e.value);
            this.showDatetime = false;
        },
        changeHgl(value) {
            this.$set(this.form, "hgl", value.value);
        },
        changeRkl(value) {
            this.$set(this.form, "rkl", value.value);
        },
        pickerClose() {
            this.showDatetime = false;
        },
        dateTimeClose() {
            this.showPicker = false;
        },
        closeHandler() {
            this.show = false;
        },
        toCK(type) {
            this.type = type;
            this.show = true;
        },
    },
};
</script>
<style lang="scss" scoped>
.ck-container {
    padding: 0 32rpx 32rpx;

    .ck-search {
        height: 80rpx;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
    }
    .ck-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 0;
        .ck-title-add {
            padding: 0 40rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background-color: #1296db;
            color: #fff;
            line-height: 60rpx;
        }
        .ck-title-text {
            font-weight: 700;
            color: #555;
            position: relative;
            padding-left: 16rpx;
            &::after {
                content: "";
                position: absolute;
                width: 3px;
                height: 32rpx;
                background-color: #1296db;

                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
    .ck-content {
        border-radius: 24rpx;

        background-color: #fff;
        font-size: 28rpx;
        color: #999;
        .ck-content-item {
            padding: 0 40rpx;
        }
    }
    .ck-content-item-name {
        color: #333;
        font-size: 32rpx;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40rpx;
        height: 60rpx;
    }
    .ck-content-item-btn {
        font-weight: 400;
        padding: 6rpx 24rpx;
        font-size: 26rpx;
        background-color: #1296db;
        border-radius: 12rpx;
        color: #fff;
    }
    .form_items {
        .select {
            border: 1rpx solid #e5e5e5;
            height: 70rpx;
            border-radius: 12rpx;
            margin: 30rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24rpx;
            color: #666;
            .jiantou {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    .form_btn {
        height: 100rpx;
        border-radius: 50rpx;
        background-color: #1296db;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
